<template>
  <div>
    <el-descriptions title="药品详情" direction="vertical" :column="7" border>
      <el-descriptions-item label="编号">{{medical.id}}</el-descriptions-item>
      <el-descriptions-item label="药品名称">{{medical.name}}</el-descriptions-item>
      <el-descriptions-item label="图片" :span="2">
        <el-image
          style="width: 100px; height: 100px"
          :src="medical.pic"
        ></el-image>
      </el-descriptions-item>
      <el-descriptions-item label="单价">{{ medical.price }}</el-descriptions-item>
      <el-descriptions-item label="实际销售单价">{{ medical.actualSalesUnitPrice }}</el-descriptions-item>
      <el-descriptions-item label="主治功能">{{medical.indicativeFunctions}}</el-descriptions-item>
      <el-descriptions-item label="用法用量">{{medical.usagAndDosage}}</el-descriptions-item>
      <el-descriptions-item label="所属药房">{{medical.pharmacyName}}</el-descriptions-item>
      <el-descriptions-item label="药品规格">{{medical.sku}}</el-descriptions-item>
      <el-descriptions-item label="运费">{{medical.shippingFee}}</el-descriptions-item>
      <el-descriptions-item label="生产企业">{{medical.manufacturingEnterprise}}</el-descriptions-item>
      <el-descriptions-item label="药品成分">{{medical.drugIngredients}}</el-descriptions-item>
      <el-descriptions-item label="用药禁忌">{{medical.contraindications}}</el-descriptions-item>
      <el-descriptions-item label="药品性状">{{medical.drugShape}}</el-descriptions-item>
      <el-descriptions-item label="不良反应">{{medical.adverseReactions}}</el-descriptions-item>
      <el-descriptions-item label="相互作用">{{medical.interact}}</el-descriptions-item>
      <el-descriptions-item label="贮藏条件">{{medical.storageConditions}}</el-descriptions-item>
      <el-descriptions-item label="包装">{{medical.packages}}</el-descriptions-item>
      <el-descriptions-item label="剂型">{{medical.dosageForm}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" :column="4" border>
      <el-descriptions-item label="注意事项">{{medical.precautions}}</el-descriptions-item>
      <el-descriptions-item label="批准文号">{{medical.approvalNo}}</el-descriptions-item>
      <el-descriptions-item label="药品类型">{{medical.typeName}}</el-descriptions-item>
      <el-descriptions-item label="库存">{{medical.inventory}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" :column="6" borde>
      <el-descriptions-item label="销量">{{medical.salesVolume}}</el-descriptions-item>
      <el-descriptions-item label="生产日期">{{parseTime(medical.dateOfManufacture, '{y}-{m}-{d}')}}</el-descriptions-item>
      <el-descriptions-item label="有效期">{{medical.periodOfValidity}}</el-descriptions-item>
      <el-descriptions-item label="排序字段">{{medical.sort}}</el-descriptions-item>
      <el-descriptions-item label="上架状态">{{medical.statusName}}</el-descriptions-item>
      <el-descriptions-item label="过期状态">{{medical.pastDueName}}</el-descriptions-item>
    </el-descriptions>
    <el-button type="primary" @click="returnPreviousPage()">返回上一页</el-button>
    <el-button type="primary" @click="handleUpdate(medical.id)">编辑</el-button>
    <el-button type="primary" @click="handleUpdate(medical.id)">删除</el-button>
    <!-- 添加或修改药品对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-steps :active="active" finish-status="success">
          <el-step title="步骤 1" icon="el-icon-edit"></el-step>
          <el-step title="步骤 2" icon="el-icon-upload"></el-step>
          <el-step title="步骤 3" icon="el-icon-picture"></el-step>
        </el-steps>
        <div v-if="0==active">
          <el-form-item label="药品名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入药品名称" />
          </el-form-item>
          <el-form-item label="图片" prop="pic">
            <el-upload
              action="/dev-api/medicine/medicine/upload"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input v-model="form.price" placeholder="请输入单价" />
          </el-form-item>
          <el-form-item label="实际销售单价" prop="actualSalesUnitPrice">
            <el-input v-model="form.actualSalesUnitPrice" placeholder="请输入实际销售单价" />
          </el-form-item>
          <el-form-item label="药品规格" prop="sku">
            <el-input v-model="form.sku" placeholder="请输入药品规格" />
          </el-form-item>
          <el-form-item label="运费" prop="shippingFee">
            <el-input v-model="form.shippingFee" placeholder="请输入运费" />
          </el-form-item>
          <el-form-item label="所属药房" prop="pharmacyId">
            <el-select v-model="form.pharmacyId" placeholder="请选择">
              <el-option
                v-for="item in pharmacyList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="库存" prop="inventory">
            <el-input v-model="form.inventory" placeholder="请输入库存" />
          </el-form-item>
          <el-form-item label="生产企业" prop="manufacturingEnterprise">
            <el-input v-model="form.manufacturingEnterprise" placeholder="请输入生产企业" />
          </el-form-item>
        </div>
        <div v-if="1==active">
          <el-form-item label="主治功能" prop="indicativeFunctions">
            <el-input v-model="form.indicativeFunctions" placeholder="请输入主治功能" />
          </el-form-item>
          <el-form-item label="用法用量" prop="usagAndDosage">
            <el-input v-model="form.usagAndDosage" placeholder="请输入用法用量" />
          </el-form-item>
          <el-form-item label="药品成分" prop="drugIngredients">
            <el-input v-model="form.drugIngredients" placeholder="请输入药品成分" />
          </el-form-item>
          <el-form-item label="用药禁忌" prop="contraindications">
            <el-input v-model="form.contraindications" placeholder="请输入用药禁忌" />
          </el-form-item>
          <el-form-item label="药品性状" prop="drugShape">
            <el-input v-model="form.drugShape" placeholder="请输入药品性状" />
          </el-form-item>
          <el-form-item label="不良反应" prop="adverseReactions">
            <el-input v-model="form.adverseReactions" placeholder="请输入不良反应" />
          </el-form-item>
        </div>
        <div v-if="2==active">
          <el-form-item label="相互作用" prop="interact">
            <el-input v-model="form.interact" placeholder="请输入相互作用" />
          </el-form-item>
          <el-form-item label="贮藏条件" prop="storageConditions">
            <el-input v-model="form.storageConditions" placeholder="请输入贮藏条件" />
          </el-form-item>
          <el-form-item label="包装" prop="packages">
            <el-input v-model="form.packages" placeholder="请输入包装" />
          </el-form-item>
          <el-form-item label="剂型" prop="dosageForm">
            <el-input v-model="form.dosageForm" placeholder="请输入剂型" />
          </el-form-item>
          <el-form-item label="注意事项" prop="precautions">
            <el-input v-model="form.precautions" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </div>
        <div v-if="3==active">
          <el-form-item label="批准文号" prop="approvalNo">
            <el-input v-model="form.approvalNo" placeholder="请输入批准文号" />
          </el-form-item>
          <el-form-item label="药品类型" prop="typeId">
            <el-select v-model="form.typeId" placeholder="请选择药品类型">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生产日期" prop="dateOfManufacture">
            <el-date-picker clearable
                            v-model="form.dateOfManufacture"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择生产日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="有效期" prop="periodOfValidity">
            <el-input v-model="form.periodOfValidity" placeholder="请输入有效期" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" placeholder="请输入排序" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {addMedicine, delMedicine, getMedicine, updateMedicine} from "@/api/medicine/medicine";
import {allPharmacyList} from "@/api/medicine/pharmacy";
import {allTypeList} from "@/api/medicine/type";

export default {
  name: "detail",
  data(){
    return {
      id: null,
      medical: {},
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      active: 0,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      pharmacyList: [],
      typeList: []

    }
  },
  created() {
    this.getPharmacyList()
    this.getTypeList()
  },
  // 使用watch来监听路由变化
  watch: {
    '$route': {
      immediate: true,
      handler(to, from) {
        this.getMedicineDetail(to.params.id || to.query.id);
      }
    }
  },
  methods: {
    returnPreviousPage(){
      history.back()
    },
    getMedicineDetail(id){
      console.log(id)
      getMedicine(id).then(res => {
        this.medical = res.data
      })
    },
    getPharmacyList(){
      allPharmacyList().then(res => {
        this.pharmacyList = res.data
      })
    },
    getTypeList(){
      allTypeList().then(res => {
        this.typeList = res.data
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 修改按钮操作 */
    handleUpdate(id) {
      this.reset();
      console.log("id"+id)
      getMedicine(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改药品";
      });
    },
    /** 删除按钮操作 */
    handleDelete(id) {
      this.$modal.confirm('是否确认删除药品编号为"' + id + '"的数据项？').then(function() {
        return delMedicine(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateMedicine(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addMedicine(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        pic: null,
        price: null,
        actualSalesUnitPrice: null,
        indicativeFunctions: null,
        usagAndDosage: null,
        pharmacyId: null,
        sku: null,
        shippingFee: null,
        manufacturingEnterprise: null,
        drugIngredients: null,
        contraindications: null,
        drugShape: null,
        adverseReactions: null,
        interact: null,
        storageConditions: null,
        packages: null,
        dosageForm: null,
        precautions: null,
        approvalNo: null,
        typeId: null,
        inventory: null,
        salesVolume: null,
        dateOfManufacture: null,
        periodOfValidity: null,
        createTime: null,
        createBy: null,
        lastUpdateTime: null,
        updateBy: null,
        state: null,
        sort: null,
        deletedFlag: null,
        status: null,
        pastDue: null
      };
      this.resetForm("form");
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    handleSuccess(response){
      this.form.pic = response.data
      console.log(response)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  }
}
</script>

<style scoped>

</style>
